<template>
	<view>
		<view class="user-vip">
			<view class="header">
				<view class="user-vip-info flex">
					<u-image width="110rpx" height="110rpx" border-radius="50%" :src="userInfo.avatar"></u-image>
					<view class="m-l-20">
						<view class="user-text white xxl flex">{{userInfo.nickname}}</view>
						<view class="flex m-t-10">
							<view class="">
								<view class="user-level white xs flex row-center m-r-15">
									等级：{{userInfo.level_name || "无"}}
								</view>
							</view>
							<text v-if="userInfo.is_shop === 1" class="hehuoren white xs flex row-center">合伙人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content m-t-50">
				<view class="vip-swiper-container">
					<view v-if="userInfo.is_shop === 1 || userInfo.level === 5" class="vip-card-item"
						:style="'background-image: url(' + levelSixValue.background_image + ');'">
						<view class="flex row-between">
							<view class="flex grade white sm">当前等级</view>
							<image class="grade-icon m-r-34" :src="levelSixValue.image" mode="widthFix">
							</image>
						</view>
						<view class="flex row-between vip-name white">
							<view class="bold">{{levelSixValue.name}}</view>
						</view>
					</view>

					<view v-else-if="userInfo.level === 0" class="vip-card-item"
						:style="'background-image: url(' + levelValue.background_image + ');'">
						<view class="flex row-between">
							<view class="flex grade white sm">当前等级</view>
							<image class="grade-icon m-r-34" :src="levelValue.image" mode="widthFix">
							</image>
						</view>
						<view class="flex row-between vip-name white">
							<view class="bold">{{levelValue.name}}</view>
						</view>
					</view>

					<view v-else class="vip-card-item" :style="'background-image: url(' + levelInfo.background_image + ');'">
						<view class="flex row-between">
							<view class="flex grade white sm">当前等级</view>
							<image class="grade-icon m-r-34" :src="levelInfo.image" mode="widthFix">
							</image>
						</view>
						<view class="flex row-between vip-name white">
							<view class="bold">{{levelInfo.name}}</view>
						</view>
					</view>
				</view>
				<view class="vip-grade-rule">
					<view class="title flex">
						<view class="line br60"></view>
						<view class="xl m-l-20 bold">说明</view>
					</view>
					<view class="p-t-20">
						<text class="rule-content column lighter">
							{{growthRule}}
						</text>
					</view>
				</view>
				<!-- <view class="vip-rights">
					<view class="title flex">
						<view class="line br60"></view>
						<view class="xl ml20 bold">会员权益</view>
					</view>
					<view class="rights-list flex">
						<view v-for="(item, index) in privilegeList" :key="index" class="rights-item column-center">
							<image class="mb10" :src="item.image"></image>
							<view class="sm">{{item.name}}</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view v-if="userInfo.is_shop === 0" class="vip-bottom" @click="becomePartner">
			<view class="bottom-btn">
				{{ userInfo.partner }}元 成为合伙人
			</view>
		</view>
		<view v-else class="vip-bottom" @click="toStoreSettled">
			<view class="bottom-btn">
				创建店铺
			</view>
		</view>
		<loading-view v-if="!userInfo.nickname"></loading-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getLevelList
	} from '@/api/user';
	import {
		prepay
	} from '@/api/app'
	import {
		authenticationOrder
	} from '@/api/order'
	import {
		wxpay
	} from '@/utils/pay'
	import vip0 from '@/static/images/vip/vip-0-bg.png'
	import vip6 from '@/static/images/vip/vip-6-bg.png'

	export default {
		data() {
			return {
				currentIndex: 0,
				levelValue: {
					background_image: vip0,
					create_time: null,
					del: 0,
					id: 0,
					image: "/static/images/vip/vip-0.png",
					name: "普通用户",
					privilege: null,
				},
				levelSixValue: {
					background_image: vip6,
					create_time: null,
					del: 0,
					id: 6,
					image: "/static/images/vip/vip-6.png",
					name: "合伙人",
					privilege: null,
				},
				growthRule: "",
				privilegeList: [],
				levelInfo: []
			};
		},


		onLoad() {
			this.getUser();
			setTimeout(() => {
				this.levelList = [...this.levelList, ...this.userInfo.level_list, this.levelSixValue]
				this.currentIndex = this.userInfo.level
				this.growthRule = this.levelList[this.userInfo.level].remark
			}, 500)
		},

		onShow() {
			this.getUser();
			setTimeout(() => {
				this.levelInfo = this.userInfo.level_info
				this.currentIndex = this.userInfo.level
				this.growthRule = this.levelList[this.userInfo.level].remark
			}, 500)
		},


		methods: {
			...mapActions(['getUser']),
			// 点击成为合伙人
			becomePartner() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确认成为合伙人?',
					confirmColor: '#FF2C3C',
					success: async res => {
						let {
							confirm
						} = res;
						if (confirm) {
							authenticationOrder({
								pay_way: '3'
							}).then(res => {
								uni.navigateTo({
									url: `/pages/payment/payment?from=authentication&order_id=${res.data.id}`
								})
							})
						}
					}
				});
			},
			// 点击前往创建店铺
			toStoreSettled() {
				uni.navigateTo({
					url: 'bundle/pages/store_settled/store_settled'
				});
			},
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		background-image: url(../../static/vip_grade_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;

		.user-vip {
			position: relative;

			.header {
				padding-top: 40rpx;

				.user-vip-info {
					padding-left: 30rpx;

					.user-level {
						border: 1px solid white;
						border-radius: 100rpx;
						padding: 4rpx 20rpx;
						line-height: 30rpx;
					}

					.user-text {
						line-height: 50rpx;
						font-weight: bold;
					}
				}

				.level-box {
					display: flex;
				}

				.hehuoren {
					border: 1px solid white;
					border-radius: 100rpx;
					padding: 4rpx 20rpx;
					line-height: 30rpx;
				}
			}

			.content {

				.vip-card-item {
					height: 360rpx;
					width: 690rpx;
					position: relative;
					background-size: 100% 100%;
					margin: 0 auto;

					.grade {
						line-height: 36rpx;
						background-color: rgba(0, 0, 0, 0.5);
						border-top-right-radius: 100rpx;
						border-bottom-right-radius: 100rpx;
						height: 50rpx;
						padding: 0 28rpx;
						margin-top: -120rpx;
					}

					.user-grade {
						line-height: 36rpx;
						margin-left: 30rpx;
					}

					.grade-icon {
						width: 200rpx;
						margin-top: 80rpx;
					}

					.vip-name {
						padding: 10rpx 30rpx;
						font-size: 46rpx;
						text-align: center;
						align-items: flex-end;
						margin-bottom: 30rpx;
						margin-top: -60rpx;
					}

					.vip-progress {
						height: 8rpx;
						border-radius: 8rpx;
						width: 100%;
						overflow: hidden;

						.vip-progress-bar {
							background-color: #f8d07c;
							height: 100%;
						}
					}

				}

				.vip-grade-rule {
					margin: 24rpx 40rpx;

					.title {
						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}
				}

				.vip-rights {
					margin: 24rpx 40rpx;

					.title {
						padding: 28rpx 0;

						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}

					.rights-item {
						width: 25%;
						padding-bottom: 30rpx;

						image {
							width: 82rpx;
							height: 82rpx;
						}
					}
				}
			}
		}

		.vip-bottom {
			width: 100%;
			position: fixed;
			bottom: 3%;

			.bottom-btn {
				width: 80%;
				text-align: center;
				background-color: #9093a2;
				margin: 0 auto;
				color: #fff;
				padding: 20rpx 0;
				border-radius: 50rpx;
			}
		}
	}
</style>